<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商家</title>
</head>
<body>
<a th:href="@{/toShelves}">上架</a>
<a th:href="@{/toAddList}">批量上架</a>
<a th:href="@{/toWareHouse}">仓库</a>
<a th:href="@{/toCollect}">未接单</a>
<a id="delete" onclick="x()">删除选中</a>
<table id="dataTable">
    <thead>
    <th></th>
    <th>图片</th>
    <th>商品</th>
    <th>价格</th>
    <th>库存</th>
    </thead>
    <tbody>
    <tr th:each="good : ${goods}">
        <td><input type="checkbox" name="gid" th:value="${good.goodsId}"></td>
        <td><img style="width:700px;height:500px"
                th:src="@{'/photo/'+${good.avatar}}">
        </td>
        <td th:text="${good.goodsName}"></td>
        <td th:text="${good.goodsPrice}"></td>
        <td th:text="${good.number}"></td>
        <td>
            <a @click="deleteGoods" th:href="@{'/deleteGoods/'+${good.goodsId}}">下架</a>
            <a  th:href="@{'/toUpdateGoods/'+${good.goodsId}}">修改</a>
        </td>
    </tr>
    </tbody>
</table>
<script type="text/javascript" th:src="@{/static/js/jquery-3.6.0.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script type="text/javascript" th:src="@{/static/js/axios.min.js}"></script>
<script type="text/javascript">
    function x() {
        let msg = "您确定要下架这些商品吗";
        if (confirm(msg) == true) {
            let s = document.getElementsByName("gid");
            var gid = "";
            for (let i = 0; i < s.length; i++) {
                if (s[i].checked) gid += s[i].value + ",";
            }
            $.ajax({
                url: "deleteAllGoods",
                type: "post",
                data: {"gid": gid},
                success: function (response) {
                    alert(response);
                    window.location.href = "/marketersLogin";
                },
                error: function () {
                    alert("失败");
                },
            });
        }
    }

    var vue = new Vue({
        el: "#dataTable",
        methods: {
            deleteGoods: function (event) {
                event.preventDefault();
                let msg = "您确定要下架商品吗";
                if (confirm(msg) == true) {
                    axios({
                        method:"delete",
                        url:event.target.href,
                    }).then(function (response) {
                        alert(response.data);
                        window.location.href = "/marketersLogin";
                    });
                }
            },
        }
    });
</script>


</body>
</html>